<script>
  import dayjs from 'dayjs';
  import { calendar } from '@/sheep/components/s-better-calendar/calendar';
  import MarkLists from '@/pages/pc/components/marklists.vue';
  import UniCol from '@/uni_modules/uni-row/components/uni-col/uni-col.vue';
  import sheep from '@/sheep';

  export default {
    name: 'pcAlmanac',
    components: { UniCol, MarkLists },
    data() {
      return {
        realTimeTime: '',
        // 今天的信息
        todayInfo: {},
        // 老黄历
        oldYellowCalendarInfo: {},
      };
    },
    created() {
      this.getRealTimeTime();
      this.getChineseAlmanac();
      this.todayInfo = calendar.solar2lunar(dayjs(new Date().getTime()).format('YYYY'), dayjs(new Date().getTime()).format('MM'), dayjs(new Date().getTime()).format('DD'));
    },
    methods: {
      // 今天时间
      getRealTimeTime() {
        setInterval(() => {
          this.realTimeTime = dayjs(new Date().getTime()).format('YYYY年MM月DD日 HH:mm:ss');
        }, 100);
      },
      // 获取老黄历
      async getChineseAlmanac() {
        let { data } = await sheep.$api.surname.getStuffInfo();
        this.oldYellowCalendarInfo = data;
        this.oldYellowCalendarInfo.list = [
          { ...this.oldYellowCalendarInfo.jishi.zi, name: '子时' },
          { ...this.oldYellowCalendarInfo.jishi.chou, name: '丑时' },
          { ...this.oldYellowCalendarInfo.jishi.yin, name: '寅时' },
          { ...this.oldYellowCalendarInfo.jishi.mao, name: '卯时' },
          { ...this.oldYellowCalendarInfo.jishi.cheng, name: '辰时' },
          { ...this.oldYellowCalendarInfo.jishi.si, name: '巳时' },
          { ...this.oldYellowCalendarInfo.jishi.wu, name: '午时' },
          { ...this.oldYellowCalendarInfo.jishi.wei, name: '未时' },
          { ...this.oldYellowCalendarInfo.jishi.shen, name: '申时' },
          { ...this.oldYellowCalendarInfo.jishi.you, name: '酉时' },
          { ...this.oldYellowCalendarInfo.jishi.xu, name: '戌时' },
          { ...this.oldYellowCalendarInfo.jishi.hai, name: '亥时' },
        ];
        console.log(this.oldYellowCalendarInfo);
      },
    },
  };
</script>

<template>
  <view class="flex-sub flex flex-column bg_FFFFFF"
        style="border-radius: 16rpx;overflow: hidden;font-family: Source Han Sans CN, Source Han Sans CN;">
    <view style="width: 100%;padding: 10px 0;border-bottom: 1px solid #E8E8E8"
          class="flex align-center justify-between">
      <view class="flex align-end" style="margin-left: 20px;">
        <view class="flex align-center">
          <view style="width: 4px;height: 18px;border-radius: 7px;background: #FF440A"></view>
          <view style="font-size: 28px;color: #363636;margin-left: 5px;white-space: nowrap" class="fw_500">
            老黄历
          </view>
        </view>
        <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
          {{ realTimeTime }}
        </view>
        <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
          {{ todayInfo.gzYear }}年{{ todayInfo.IMonthCn }}{{ todayInfo.IDayCn }}
        </view>
        <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
          {{ todayInfo.ncWeek }}
        </view>
        <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
          第{{ todayInfo.whichWeek }}周
        </view>
      </view>
    </view>
    <view class="flex-sub" style="position: relative">
      <scroll-view scroll-y="true" class="surnameList">
        <view class="flex flex-column align-center ml_20 mr_20" style="padding: 20rpx 0">
          <uni-row style="width: 100%;"
                   class="flex align-center justify-between"
          >
            <uni-col :span="24"
                     style="background: #FFF8E8;border-radius: 16rpx;padding: 40rpx 20rpx"
            >
              <uni-row style="width: 100%" class="flex">
                <uni-col :span="8" style="padding-right: 34rpx;border-right: 2rpx solid #FAD582">
                  <view class="timeListDetail_listLabel flex flex-row align-center">
                    <view class="timeListDetail_listLabel_line"></view>
                    <text class="timeListDetail_listLabel_text"
                          style="margin-left: 10px;font-size: 20px;font-weight: 500;color: #91643D;"
                    >
                      今日宜忌
                    </text>
                  </view>
                  <view class="timeListDetail_content flex align-start"
                        style="margin-top: 20px;"
                  >
                    <MarkLists title="宜" is_color></MarkLists>
                    <view class="timeListDetail_content_text"
                          style="margin-left: 10px;font-size: 20px;color: #91643D;font-weight: 500;"
                          v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.yi"
                    >
                      {{
                        oldYellowCalendarInfo.content.yi || ''
                      }}
                    </view>
                  </view>
                  <view class="timeListDetail_content flex align-start"
                        style="margin-top: 20px;"
                  >
                    <MarkLists title="忌"></MarkLists>
                    <text class="timeListDetail_content_text"
                          style="margin-left: 10px;font-size: 20px;color: #91643D;font-weight: 500;"
                          v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.ji"
                    >
                      {{
                        oldYellowCalendarInfo.content.ji || ''
                      }}
                    </text>
                  </view>
                </uni-col>
                <uni-col :span="8" style="padding:0 17px;border-right: 1px solid #FAD582">
                  <view class="timeListDetail_listLabel flex flex-row align-center">
                    <view class="timeListDetail_listLabel_line"></view>
                    <text class="timeListDetail_listLabel_text"
                          style="margin-left: 10px;font-size: 20px;font-weight: 500;color: #91643D;"
                    >
                      今日神位
                    </text>
                  </view>
                  <view class="timeListDetail_description"
                        style="margin-top: 20px;"
                  >
                    <text class="timeListDetail_description_text"
                          v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.zhiri"
                          style="font-size: 20px;color: #91643D;font-weight: 500;"
                    >
                      值日: {{
                        oldYellowCalendarInfo.content.zhiri || ''
                      }}
                    </text>
                  </view>
                  <view class="timeListDetail_description"
                        style="margin-top: 10px;"
                  >
                    <text class="timeListDetail_description_text"
                          v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.zhishen"
                          style="font-size: 20px;color: #91643D;font-weight: 500;"
                    >
                      值神: {{
                        oldYellowCalendarInfo.content.zhishen || ''
                      }}
                    </text>
                  </view>
                  <view class="timeListDetail_description"
                        style="margin-top: 10px;"
                  >
                    <text class="timeListDetail_description_text"
                          v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.tszf"
                          style="font-size: 20px;color: #91643D;font-weight: 500;"
                    >
                      胎神占方: {{
                        oldYellowCalendarInfo.content.tszf || ''
                      }}
                    </text>
                  </view>
                </uni-col>
                <uni-col :span="8" style="padding:0 17px;">
                  <view class="timeListDetail_listLabel flex flex-row align-center">
                    <view class="timeListDetail_listLabel_line"></view>
                    <text class="timeListDetail_listLabel_text"
                          style="margin-left: 10px;font-size: 20px;font-weight: 500;color: #91643D;"
                    >
                      今日趋忌
                    </text>
                  </view>
                  <view class="timeListDetail_description"
                        style="margin-top: 20px;"
                  >
                    <text class="timeListDetail_description_text"
                          v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.jsyq"
                          style="font-size: 20px;color: #91643D;font-weight: 500;"
                    >
                      吉神宜趋: {{
                        oldYellowCalendarInfo.content.jsyq || ''
                      }}
                    </text>
                  </view>
                  <view class="timeListDetail_description"
                        style="margin-top: 10px;"
                  >
                    <text class="timeListDetail_description_text"
                          v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.xsyj"
                          style="font-size: 20px;color: #91643D;font-weight: 500;"
                    >
                      凶神宜忌: {{
                        oldYellowCalendarInfo.content.xsyj || ''
                      }}
                    </text>
                  </view>
                  <view class="timeListDetail_description"
                        style="margin-top: 10px;"
                  >
                    <text class="timeListDetail_description_text"
                          v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.pzbj"
                          style="font-size: 20px;color: #91643D;font-weight: 500;"
                    >
                      彭祖百忌: {{
                        oldYellowCalendarInfo.content.pzbj || ''
                      }}
                    </text>
                  </view>
                </uni-col>
              </uni-row>
            </uni-col>
          </uni-row>
          <uni-row style="margin-top: 20px;flex-wrap: wrap"
                   class="flex align-center justify-between"
          >
            <uni-col :span="12"
                     class="flex align-center justify-center"
                     v-for="(item,index) in oldYellowCalendarInfo.list" :key="index"
            >
              <uni-row
                style="width: 98%;background: #FFF8E8;border-radius: 8px;padding: 20px 10px;margin-bottom: 20px;"
                class="flex">
                <uni-col :span="12" style="padding-right: 17px;border-right: 1px solid #FAD582">
                  <view class="timeListDetail_listLabel flex flex-row align-center">
                    <view class="timeListDetail_listLabel_line"></view>
                    <text class="timeListDetail_listLabel_text"
                          style="margin-left: 10px;font-size: 20px;font-weight: 500;color: #91643D;"
                    >
                      {{ item.name }}宜忌
                    </text>
                    <view class="theDurationOfTheDay_left flex align-center"
                          style="margin-left: 10px;font-size: 16px;color: #FF4206;font-weight: 500;"
                    >
                      <view class="theDurationOfTheDay_left_hour">
                        {{ `${item.shijian.split('-')[0].split(':')[0]}:${item.shijian.split('-')[0].split(':')[1]}`
                        }}
                      </view>
                      <view class="theDurationOfTheDay_left_tips ml_2 mr_2">至</view>
                      <view class="theDurationOfTheDay_left_hour">
                        {{ `${item.shijian.split('-')[1].split(':')[0]}:${item.shijian.split('-')[1].split(':')[1]}`
                        }}
                      </view>
                    </view>
                  </view>
                  <view class="timeListDetail_description"
                        style="margin-top: 20px;"
                  >
                    <text class="timeListDetail_description_text"
                          v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.zhiri"
                          style="font-size: 20px;color: #91643D;font-weight: 500;"
                    >
                      吉凶: {{
                        item.jixiong || ''
                      }}
                    </text>
                  </view>
                  <view class="timeListDetail_description"
                        style="margin-top: 20px;"
                  >
                    <text class="timeListDetail_description_text"
                          v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.zhiri"
                          style="font-size: 20px;color: #91643D;font-weight: 500;"
                    >
                      时冲: {{
                        item.shichong || ''
                      }}
                    </text>
                  </view>
                  <view class="timeListDetail_description"
                        style="margin-top: 20px;"
                  >
                    <text class="timeListDetail_description_text"
                          v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.zhiri"
                          style="font-size: 20px;color: #91643D;font-weight: 500;"
                    >
                      时柱: {{
                        item.shizhu || ''
                      }}
                    </text>
                  </view>
                </uni-col>
                <uni-col :span="12" style="padding:0 17px;">
                  <view class="timeListDetail_listLabel flex flex-row align-center">
                    <view class="timeListDetail_listLabel_line"></view>
                    <text class="timeListDetail_listLabel_text"
                          style="margin-left: 10px;font-size: 20px;font-weight: 500;color: #91643D;"
                    >
                      今日吉凶
                    </text>
                  </view>
                  <view class="timeListDetail_description"
                        style="margin-top: 20px;"
                  >
                    <text class="timeListDetail_description_text"
                          style="font-size: 20px;color: #91643D;font-weight: 500;"
                    >
                      吉神: {{
                        item.jishen || ''
                      }}
                    </text>
                  </view>
                  <view class="timeListDetail_description"
                        style="margin-top: 10px;"
                  >
                    <text class="timeListDetail_description_text"
                          style="font-size: 20px;color: #91643D;font-weight: 500;"
                    >
                      凶神: {{
                        item.xiongshen || ''
                      }}
                    </text>
                  </view>
                </uni-col>
              </uni-row>
            </uni-col>
          </uni-row>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .surnameList {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .timeListDetail_listLabel_line {
    width: 8px;
    height: 22px;
    background: #FF4206;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
</style>